<template>
<l-layout class="l-tab-page" >
    <l-panel>
        <template #toolLeft >
            <div class="l-panel--item" >
                <el-input :placeholder="$t('请输入关键字查询')" v-model="searchWord"  @keyup.enter.native="hanleSearch" size="mini" >
                    <el-button slot="append" icon="el-icon-search" @click="hanleSearch" ></el-button>
                </el-input>
            </div>
        </template>
        <template #toolRight >
            <l-tool-btns :refreshClick="refreshClick" @click="handleAdd()" >
            </l-tool-btns>
        </template>
        <l-table 
            :loading="tableLoading"
            :columns="columns"
            :dataSource="tableShowData" 
            row-key="f_Id"
            >
            <l-table-btns :btns="tableBtns" @click="lr_handleTableBtnClick" ></l-table-btns>
        </l-table>
    </l-panel>

    <l-dialog 
        :title="formTitle"
        :visible.sync="formVisible"
        :height="200"
        @ok="handleSave"
        @close="handleCloseForm"
        @opened="handleOpenedForm"
        >
        <my-form ref="form" ></my-form>       
    </l-dialog>
</l-layout>
</template>

<script>
const api = window.$api.codetool.area
import MyForm from './form'

export default {
  components: {
    MyForm
  },
  data () {
    return {
        lr_isPage:true,
        lr_isAuth:false,
        // 表格
        columns: [
            {label:'名称',prop:'f_Label',minWidth:'150'},
            {label:'值',prop:'f_Value',minWidth:'150'}
        ],
        tableBtns:[
            {prop:'Edit',label:'编辑'},
            {prop:'Delete',label:'删除'}
        ],
        tableLoading:false,
        tableData:[],
        searchWord:'',
        searchTableData:null,


        formVisible:false,
        formTitle:'',
        formEditRow:null,
        formEdit:false
    };
  },
  mounted () {
      this.$nextTick(()=>{
          this.refreshClick();
      })
  },
  computed:{
       tableShowData(){
           return this.searchTableData || this.tableData;
       },
  },
  methods:{
    async refreshClick(){
        this.tableLoading = true
        const data = await this.$awaitWraper(api.getList())
        this.tableData = data || []
        this.tableLoading = false
    },
    hanleSearch(){
        if(this.searchWord){
            this.searchTableData = this.tableData.filter(item => item.f_Label.indexOf(this.searchWord) >-1 || item.f_Value.indexOf(this.searchWord)>-1 );
        }
        else{
            this.searchTableData = null;
        }
    },

    // 表单部分
    handleAdd(){
        this.formEdit = false;
        this.showForm('新增功能模块')
    },
    handleEdit($index,row){
        this.formEdit = true;
        this.formEditRow = row;
        this.showForm('编辑功能模块');
    },
    handleDelete($index,row){
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
            await api.remove(row.f_Id)
            this.$message({
                type: 'success',
                message: '删除成功!'
            })
            this.refreshClick()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })         
        })
    },
    async handleSave(showLoading,hideLoading){
        showLoading()
        if(await this.$refs.form.validateForm()){
            const formData = this.$refs.form.getForm();
            if(this.formEdit){// 修改数据
                await api.update(formData.f_Id,formData)
                this.$message({
                    type: 'success',
                    message: '更新成功!'
                })
            }
            else{// 新增数据
                await api.add(formData)
                this.$message({
                    type: 'success',
                    message: '添加成功!'
                })
            }
            this.formVisible = false
            this.refreshClick()
        }
        hideLoading()
    },
    handleOpenedForm(){
        if(this.formEdit){
            this.$refs.form.setForm(this.formEditRow); 
        }
    },
    handleCloseForm(){
        this.$refs.form.resetForm();
    },
    showForm(text){
        this.formTitle = text;
        this.formVisible = true;
    }
  }

}
</script>